<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import {
  Pagination,
  Navigation,
  EffectFade,
  Autoplay,
  Scrollbar,
} from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/effect-fade";
const router = useRouter();
const modules = [Navigation, Pagination, Autoplay, EffectFade, Scrollbar];
const activeIndex = ref(0);
const mySwiper = ref(null);
const hotSwiper = ref(null);
const isStart = ref(true);
const isEnd = ref(false);
let previewTotal = 2;
try {
  previewTotal = document.documentElement.clientWidth > 640 ? 4 : 2;
} catch (e) {}

const onSlideChange = (item) => {
  activeIndex.value = item.realIndex;
};

const { data } = await useFetch("/api/home");
const { banner, hot, shoot, sports } = data.value;
const onSwiper = (swiperInstance) => {
  mySwiper.value = swiperInstance;
};

const onHotSwiper = (swiperInstance) => {
  hotSwiper.value = swiperInstance;
  isEnd.value = !!hot.list.length >= 4;
};

const changeSlide = (index) => {
  mySwiper.value.slideToLoop(index);
};

const changeHotSlide = (type) => {
  if (type == "prev") {
    hotSwiper.value.slidePrev();
  } else {
    hotSwiper.value.slideNext();
  }
};

const onHotSlide = (item) => {
  if (item.realIndex == 0) {
    isStart.value = true;
  } else {
    isStart.value = false;
  }
  isEnd.value = item.isEnd;
};

const moreGame = () => {
  navigateTo("/product");
};

const goGame = () => {
  router.push("/detail");
};
</script>

<template>
  <div>
    <div class="md:max-w-screen-xl mx-auto">
      <swiper
        ref="mySwiper"
        :modules="modules"
        loop
        :autoplay="{
          delay: 5000,
          disableOnInteraction: false,
        }"
        effect="fade"
        :scrollbar="{ draggable: true }"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
      >
        <swiper-slide v-for="(item, index) in banner" :key="index">
          <div
            :style="{ backgroundImage: 'url(' + item.bannerUrl + ')' }"
            class="w-full pb-[65%] md:pb-[50%] relative overflow-hidden bg-center bg-cover"
          >
            <img
              class="absolute w-[101%] h-[101%] left-[50%] translate-x-[-50%] z-10 hidden md:block"
              src="https://start.gtimg.com/web/www/webgame/assets/img/441ef1e48f02905cdf5f.png"
              alt=""
            />
          </div>
        </swiper-slide>
        <div
          @click="goGame"
          class="w-[150px] sm:w-[200px] h-[45px] md:h-[60px] absolute bottom-[10px] md:bottom-[60px] text-center left-[50%] translate-x-[-50%] md:translate-x-0 md:left-[40px] z-30 bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-blue-500 hover:to-cyan-500 leading-[45px] md:leading-[60px] rounded-[100px] text-[16px] md:text-[20px] cursor-pointer"
        >
          一键启动
        </div>
        <div
          class="absolute z-10 right-[20px] bottom-[20px] space-x-5 hidden md:flex"
        >
          <div
            @click="changeSlide(index)"
            v-for="(item, index) in banner"
            :key="index"
            :class="[
              'w-[100px] opacity-[40%] cursor-pointer font-bold',
              { 'opacity-[99%]': activeIndex == index },
            ]"
          >
            <div
              :style="{ backgroundImage: 'url(' + item.smallUrl + ')' }"
              class="pb-[120%] overflow-hidden bg-center bg-cover rounded-md"
            ></div>
            <div class="text-center pt-2">{{ item.title }}</div>
          </div>
        </div>
      </swiper>
    </div>
    <Container>
      <!--热门游戏-->
      <div class="mt-10">
        <div class="flex justify-between items-center">
          <div>
            <span class="font-400 text-[20px] sm:text-[28px]">{{
              hot.title
            }}</span>
            <span class="pl-5 opacity-70 font-bold">{{ hot.subTitle }}</span>
          </div>
          <div class="hidden sm:flex items-end space-x-4">
            <UIcon
              name="i-heroicons-arrow-left-circle"
              :class="[
                'w-6 h-6 text-[#00C2FF] cursor-pointer',
                { 'text-[#333]': isStart },
              ]"
              @click="changeHotSlide('prev')"
            />
            <UIcon
              name="i-heroicons-arrow-right-circle"
              :class="[
                'w-6 h-6 text-[#00C2FF] cursor-pointer',
                { 'text-[#333]': isEnd },
              ]"
              @click="changeHotSlide('next')"
            />
          </div>
        </div>
        <swiper
          ref="hotWwiper"
          :slides-per-view="previewTotal"
          :slides-per-group="previewTotal"
          :space-between="16"
          @swiper="onHotSwiper"
          @slideChange="onHotSlide"
          class="mt-8"
        >
          <swiper-slide v-for="(item, index) in hot.list" :key="index">
            <div
              class="relative rounded-xl bg-[#20222e] cursor-pointer group overflow-hidden"
              @click="goGame"
            >
              <div
                :style="{ backgroundImage: 'url(' + item.url + ')' }"
                class="w-full pb-[55%] origin-bottom overflow-hidden bg-center bg-cover group-hover:scale-105 transition-all duration-500"
              ></div>
              <div class="p-2">
                <div class="text-[16px] sm:text-[18px] line-clamp-1">
                  {{ item.title }}
                </div>
                <div class="opacity-70 pt-2 line-clamp-1">
                  {{ item.subTitle }}
                </div>
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
      <!--体育游戏-->
      <div class="mt-10">
        <div>
          <span class="font-400 text-[20px] sm:text-[28px]">{{
            sports.title
          }}</span>
          <span class="pl-5 opacity-70 font-bold">{{ sports.subTitle }}</span>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-8">
          <div
            v-for="(item, index) in sports.list"
            :key="index"
            class="relative rounded-xl bg-[#20222e] group cursor-pointer"
          >
            <div
              class="absolute opacity-0 transition-all group-hover:opacity-[100%] delay-300 w-full z-[999] top-[55%] py-[20px] left-0 bg-[#20222e] p-5 rounded-b-xl"
            >
              <div class="flex items-center">
                <img :src="item.url" width="100" class="rounded-md" alt="" />
                <div class="ml-5">{{ item.title }}</div>
              </div>
              <div
                @click="goGame"
                class="w-[80%] text-center mt-[30px] h-[50px] mx-auto bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-blue-500 hover:to-cyan-500 leading-[50px] rounded-[100px] cursor-pointer"
              >
                一键开启
              </div>
            </div>
            <div class="overflow-hidden rounded-t-xl group-hover:opacity-50">
              <div
                :style="{ backgroundImage: 'url(' + item.url + ')' }"
                class="w-full pb-[55%] origin-bottom bg-center bg-cover group-hover:scale-105 transition-all duration-500"
              ></div>
            </div>

            <div class="p-2">
              <div class="text-[16px] sm:text-[18px] line-clamp-1">
                {{ item.title }}
              </div>
              <div class="opacity-70 pt-2 line-clamp-1">
                {{ item.subTitle }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--射击游戏-->
      <div class="mt-10">
        <div>
          <span class="font-400 text-[20px] sm:text-[28px]">{{
            shoot.title
          }}</span>
          <span class="pl-5 opacity-70 font-bold">{{ shoot.subTitle }}</span>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4 mt-8">
          <div
            v-for="(item, index) in shoot.list"
            :key="index"
            class="overflow-hidden rounded-xl bg-[#20222e] group cursor-pointer"
            @click="goGame"
          >
            <div
              :style="{ backgroundImage: 'url(' + item.url + ')' }"
              class="w-full pb-[120%] origin-bottom overflow-hidden bg-center bg-cover group-hover:scale-105 transition-all duration-500"
            ></div>
            <div class="p-2">
              <div class="text-[16px] sm:text-[18px] line-clamp-1">
                {{ item.title }}
              </div>
              <div class="opacity-70 pt-2 line-clamp-1">
                {{ item.subTitle }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        @click="moreGame"
        class="w-[240px] hover:w-[280px] hover:bg-[#222222] transition-all h-[50px] opacity-80 mt-[60px] text-center mx-auto bg-[#20222e] leading-[50px] rounded-[100px] text-[18px] cursor-pointer"
      >
        更多游戏
      </div>
    </Container>
    <DownLoad class="mt-10"></DownLoad>
  </div>
</template>

<style>
.swiper {
  --swiper-theme-color: #ff6600;
}
.swiper-button-next,
.swiper-button-prev {
  transform: scale(0.5);
}
</style>
